<template>
    <!-- components/search/hotal/index.wxml -->
    <view class="input_search_bar">
        <view class="input_search_bar_box">
            <view class="district_text">
                {{ district }}
            </view>
            <view class="flex_column" style="margin-left: 20rpx">
                <view class="flex_row_c">
                    <text class="text_hint">住</text>
                    <text class="text_date">{{ startMonth }}-{{ startDay }}</text>
                </view>
                <view class="flex_row_c">
                    <text class="text_hint">离</text>
                    <text class="text_date">{{ endMonth }}-{{ endDay }}</text>
                </view>
            </view>
            <view class="splite_line" />
            <van-icon class-prefix="iconfont" name="sousuoyesousuo" size="32rpx" />
            <input type="text" class="input_search_bar_input" maxlength="20" :placeholder="placeholder" :value="inputValClone" @input="inputTyping" @confirm="onConfirm" />
            <view v-if="inputValClone.length > 0" @tap="clearInput">
                <van-icon name="clear" size="32rpx" color="#D4D4D4" />
            </view>
        </view>
    </view>
</template>

<script>
// components/search/hotal/index.js
export default {
    data() {
        return {
            startMonth: '',
            startDay: '',
            endMonth: '',
            endDay: '',
            inputValClone: ''
        };
    },
    mixins: [require('miniprogram-computed').behavior],
    props: {
        startTime: {
            type: Number,
            default: 0
        },
        endTime: {
            type: Number,
            default: 0
        },
        district: {
            type: String,
            default: ''
        },
        inputVal: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入内容'
        }
    },
    computed: {
        startMonth(data) {
            return new Date(data.startTime).getMonth() + 1;
        },
        startDay(data) {
            return new Date(data.startTime).getDate();
        },
        endMonth(data) {
            return new Date(data.endTime).getMonth() + 1;
        },
        endDay(data) {
            return new Date(data.endTime).getDate();
        },
        days(data) {
            return (data.endTime - data.startTime) / 24 / 60 / 60 / 1000;
        }
    },
    methods: {
        clearInput: function () {
            this.setData({
                inputValClone: ''
            });
        },
        inputTyping: function (e) {
            this.setData({
                inputValClone: e.detail.value
            });
        },
        onConfirm: function () {
            this.$emit('searchVal', {
                detail: this.inputVal
            });
        }
    },
    created: function () {},
    watch: {
        inputVal: {
            handler: function (newVal, oldVal) {
                this.inputValClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
